<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <pre>
    1. 学习生命周期的意义：有助于理解 Vue 实例的运行方式、完成更复杂的功能、分析错误原因等

    2. 实例的生命周期：Vue 实例从被创建到挂载到页面中运行，再到不用时卸载、销毁的过程
    
    3. 钩子函数： 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数，这些方法是 Vue 给提供的

    4. Vue 生命周期经过 3 个阶段： 创建、更新、销毁
  </pre>
  <!-- Vue 生命周期分为三个阶段：创建阶段、运行阶段、销毁阶段 -->
  <div id="app">
    <div class="box">
      <h5>{{ msg }}</h5>
      <button @click="msg = 'Jerry'">更改数据</button>
    </div>
  </div>
  <script src="./vue.js">
  </script>
  <script>
    var vm = new Vue({
      // 表示开始创建一个实例对象vm 
      el: "#app",
      data: {
        msg: 'tom'
      },
      methods: {
        handle() {
          console.log(hello);
        }
      },
      beforeCreate() {
        /*
          在这个阶段，创建一个空的Vue 实例对象 这时候 只有钩子函数 默认的事件
          和 一些生命周期函数 以及默认的方法被调用
        */
        // console.log(this.msg);
        // this.handle()
      },
      created() {
        /*
          在这个阶段，data以及methods 中的方法已经被初始化完成，这时候可以进行调用msg和methods
          注意：在实际开发中，如果想最早的获取后台返回的数据，也就是调用ajax，最早就应该在created

        */
        // console.log(this.msg);
        // this.handle()
      },
      beforeMount() {
        /*
          只需要知道，这个阶段 Vue在编译 解析模板即可
          在这个阶段 Vue开始对模板进行编译，进行解析 将数据和模板中使用的位置开始进行连接
          在内存中生成一个模板字符串，生成一个DOM结构 但是需要注意的是：在内存中生成。还没有渲染到页面当中
        */
        // console.log(docment.quetySelector('h5'));

      },
      mounted() {
        /*
        到了这个阶段，就已经把内存中生成的DOM替换到页面当中，这时候就可以进行DOM操作
        操作DOM 最早的位置就是在mounted 中
        到这个阶段，Vue创建阶段已经完成了，到这个阶段，Vue模板全部解析完毕，数据和模板完成
        结合，生成页面
        */
        // console.log(document.querySelector('h5'));

      },
      beforeUpdate() {
        /*
          在这个钩子函数中，页面中显示数据是旧的，但是data中的数据是最新的，
          在这个阶段，vue是监听到更新，在内存里面再次生成一份，虚拟的DOM，但是这个虚拟的DOM还没有渲染
          到页面上。
          所以页面数据是之前的，老的，但是数据是最新的
        */
      },
      updated() {
        // 在这个阶段,最新的数据以及和内存的DOM已经编译成功,替换到真正的DOM
        console.log(docment.querySelector('h5'));
        console.log(this.msg);
      }
    })
  </script>
</body>

</html>